<script setup>

import {deleteSysMenu, getSysMenu, listAllActionByMenuId, listSysMenu} from "@/api/system/menu";
import {getCurrentInstance, ref} from "vue";
import MenuForm from "@/views/system/menu/MenuForm.vue";

const {proxy} = getCurrentInstance();
const menuList = ref([]);
const menuFormRef = ref();
const menuData = ref(null);
const activeMenuId = ref()
const menuActionData = ref([]);

const getList = () => {
  listSysMenu().then(resp => {
    menuList.value = []
    let menu = {menuId: 0, title: '根目录', children: []}
    menu.children = resp.data
    menuList.value.push(menu)
  })
  activeMenuId.value && loadMenuDetail();
}

const openMenu = (menuId, type) => {
  menuFormRef.value.open(menuId, type)
}

const deleteMenu = async (menuId) => {
  proxy.$modal.confirm('确定删除该菜单吗？').then(async () => {
    await deleteSysMenu(menuId);
    proxy.$modal.okNotify('删除成功');
    getList();
    activeMenuId.value && await loadMenuDetail();
  })
}

const getMenuDetail = async (selectedKeys, {node: {dataRef}}) => {
  if (activeMenuId.value === dataRef.menuId) {
    activeMenuId.value = undefined;
    menuData.value = null;
  } else {
    activeMenuId.value = dataRef.menuId
    activeMenuId.value !== 0 && await loadMenuDetail();
  }
}

const loadMenuDetail = async () => {
  const {data} = await getSysMenu(activeMenuId.value);
  menuData.value = data;
  await loadActionData();
}

const loadActionData = async () => {
  const {data} = await listAllActionByMenuId(activeMenuId.value);
  menuActionData.value = data;
}

getList();
</script>

<template>
  <div class="app-container">
    <div class="grid grid-cols-[1fr_2fr] grid-rows-[auto_1fr] col-span-2 gap-x-1.5rem">
      <a-tree
          v-if="menuList.length > 0"
          style="max-width: 600px;width: 600px"
          :tree-data="menuList"
          node-key="menuId"
          :expand-on-click-node="false"
          @select="getMenuDetail"
          :current-node-key="activeMenuId"
          highlight-current
          :default-expand-all="true"
      >
        <template v-slot:title="nodeData">
          <div class="custom-tree-node">
        <span>
          <Icon v-if="nodeData.icon" :icon="nodeData.icon" size="16px" color="#333" class="mr-1"/>
          {{ nodeData.title }}
        </span>
            <div class="">
              <a-button type="link" @click="openMenu(nodeData.menuId,'create')"
                        v-hasPermission="['system:menu:add']">新增
              </a-button>
              <a-button :disabled="nodeData.menuId === 0" class="ml-2" danger type="text"
                        @click="deleteMenu(nodeData.menuId)"
                        v-hasPermission="['system:menu:delete']">
                删除
              </a-button>
            </div>
          </div>
        </template>
      </a-tree>
      <div>
        <a-empty v-if="menuData == null" description="请选择菜单查看详情"></a-empty>
        <template v-else>
          <a-descriptions
              :title="menuData.menuName"
              :column="2"
              size="default"
              bordered
          >
            <template #extra>
              <a-button type="primary" @click="openMenu(activeMenuId,'update')" v-hasPermission="['system:menu:edit']">
                编辑
              </a-button>
            </template>
            <a-descriptions-item label="路由名称">
              {{ menuData?.routeName }}
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ menuData?.menuName }}
            </a-descriptions-item>
            <a-descriptions-item label="路由地址">
              {{ menuData?.path }}
            </a-descriptions-item>
            <a-descriptions-item label="组件路径">
              {{ menuData?.component }}
            </a-descriptions-item>
            <a-descriptions-item label="菜单图标">
              <div class="flex items-center">
                <icon :icon="menuData?.icon" color="#333" size="14px" class="mr-2"/>
                <span class="text-gray-500">{{ menuData?.icon }}</span>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="是否显示">
              {{ menuData?.visible ? '否' : '是' }}
            </a-descriptions-item>
            <a-descriptions-item label="是否禁用">
              {{ menuData?.status ? '是' : '否' }}
            </a-descriptions-item>
            <a-descriptions-item label="排序">
              {{ menuData?.orderNum }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions
              class="mt--20px"
              title="按钮"
              :column="2"
              size="default"
              border
          >
            <template #extra>
              <a-button type="primary" @click="openMenu(activeMenuId,'create')" v-hasPermission="['system:menu:add']">
                新增
              </a-button>
            </template>
          </a-descriptions>
          <a-table
              :data-source="menuActionData"
              :border="true"
          >
            <a-table-column data-index="menuName" title="名称"/>
            <a-table-column data-index="perms" title="权限标识"/>
            <a-table-column data-index="orderNum" title="排序"/>
            <a-table-column fixed="right" title="操作" width="220px">
              <template #default="{record}">
                <a-button class="ml-2" type="link" @click="openMenu(record.menuId,'update')"
                          v-hasPermission="['system:menu:edit']">编辑
                </a-button>
                <a-button class="ml-2" type="link" danger @click="deleteMenu(record.menuId)"
                          v-hasPermission="['system:menu:delete']">
                  删除
                </a-button>
              </template>
            </a-table-column>
          </a-table>
        </template>
      </div>
    </div>
    <menu-form ref="menuFormRef" @success="getList"/>
  </div>
</template>

<style scoped lang="scss">
:deep(.a-tree-node) {
  padding: 3px 0;
}

:deep(.ant-tree-switcher) {
  line-height: 32px;
}

.custom-tree-node {
  width: 400px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  span {
    @apply flex items-center;
  }
}
</style>
